<template name="home">
	<view>
		<!-- title -->
		<cu-bar bgColor="nav-bg-blue" :isBack="false" :isSearch="false" :weather="weather" placeholder="搜索公交路线 车站" type="1"></cu-bar>
		<!-- main menu -->
		<view class="nav-bg-blue text-white text-center menu-height">
			<view class="grid col-3 grid-square">
				<view class="action" @click="toAllCar()">
					<view class="icon-bus-alt"></view>
					<text>公共交通</text>
				</view>
				<view class="action" @click="toPlan()">
					<view class="icon-lujingguihua"></view>
					<text>出行规划</text>
				</view>
				<view class="action" @click="toNFC()">
					<view class="icon-nfc-full"></view>
					<text>一卡通</text>
				</view>
			</view>
		</view>
		<!-- other menu -->
		<view class="bg-white text-center text-black nav-menu" v-show="menus.length > 0">
			<view class="grid col-5 grid-square">
				<view class="action" v-for="(item,index) of menus" v-bind:key="index" @click="navTo(item.to)">
					<view class="nav-img" :style="{'backgroundColor':item.color}"></view>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<!-- banner -->
		<swiper class="screen-swiper round-dot sw-menu" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="5000" duration="500" v-show="swiperList.length > 0">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
				<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
			</swiper-item>
		</swiper>
		<!-- mask title -->
		<view class="cu-list menu sw-label">
			<view class="cu-item arrow">
				<view class="text-left">
					<text class="text-black text-bold text-lg">低碳出行</text>
				</view>
				<view class="action" @click="toAllCar()">
					<text class="text-grey text-sm">查看全部</text>
				</view>
			</view>
		</view>
		<!-- list -->
		<sw-car-list :carList="carList"></sw-car-list>
		<view class="cu-tabbar-height"></view>
	</view>
</template>
<script>
	import {mapState,mapGetters,mapMutations} from 'vuex'
	import swCarList from '@/components/sw-car-list/sw-car-list.vue'
	export default {
		name: "home",
		data() {
			return {
				// city:'淮安',
				InputBottom: 0,
				weather:{
					city: '--',
					weather: '--',
					temperature: ''
				},
				menus:[
					{
						color:'#009cf2',
						src:'./static/logo.png',
						to:'/pages/home/train?title=现代轻轨',
						name:'现代轻轨'
					},
					{
						color:'#01bd95',
						src:'./static/logo.png',
						to:'',
						name:'蘑菇单车'
					},
					{
						color:'#fb8c05',
						src:'./static/logo.png',
						to:'',
						name:'蘑菇网约'
					},
					{
						color:'#f66562',
						src:'./static/logo.png',
						to:'',
						name:'e停车'
					},
					{
						color:'#02bd92',
						src:'./static/logo.png',
						to:'',
						name:'高铁票'
					},
					{
						color:'#f76562',
						src:'./static/logo.png',
						to:'',
						name:'汽车票'
					},
					{
						color:'#01ba95',
						src:'./static/logo.png',
						to:'',
						name:'减排中心'
					},
					{
						color:'#fb8c01',
						src:'./static/logo.png',
						to:'',
						name:'交通资讯'
					},
					{
						color:'#039bf5',
						src:'./static/logo.png',
						to:'/pages/home/chat?title=智能客服',
						name:'智能客服'
					},
					{
						color:'#fa8c03',
						src:'./static/logo.png',
						to:'',
						name:'更多'
					},
				],
				swiperList: [{
					id: 0,
					type: 'image',
					url: 'http://pandaweb.pandabus.cn/huaian/2021_09_23/16323647802021192.jpg'
				}, {
					id: 1,
					type: 'image',
					url: 'http://pandaweb.pandabus.cn/huaian/2021_09_23/16323647915397676.jpg',
				}, {
					id: 2,
					type: 'image',
					url: 'http://pandaweb.pandabus.cn/huaian/2021_08_05/16281285638189499.jpg'
				}],
				carList:[]
			}
		},
		components: {
			swCarList
		},
		computed:{
			...mapState(['position','city','akey']),
		},
		created() {
			this.listenPosition()
			this.getWeather()
			this.getMenus()
		},
		
		methods: {
			...mapMutations(['SET_iS_SHOW_ADS','SET_POSITION']),
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			toNFC(){
				uni.navigateTo({
					url: '/pages/home/cartoon'
				})
			},
			toSearch(){
				console.log(1111111111);
				uni.navigateTo({
					url:'/pages/home/search'
				})
			},
			toPlan(){
				uni.navigateTo({
					url: '/pages/home/roadplan'
				})
			},
			isRun(index){
				let item_index = this.carList[index].index
				return !this.carList[index][item_index]['timedesc'] || this.carList[index][item_index]['timedesc'].indexOf("\"") >= 0
			},
			navTo(to){
				if(to){
					uni.navigateTo({
						url:to
					})
					return
				}
				uni.showToast({
					icon:'none',
					title:'开发中...'
				})
			},
			toAllCar(){
				uni.navigateTo({
					url:'/pages/home/cars'
				})
			},
			getMenus(){
				let that = this
				let url = 'https://api.vshare.site/api/test/menuList';
				uni.request({
					url: url,
					method: 'GET',
					success(res) {
						console.log(res)
						that.menus = res.data.menuList
						that.swiperList = res.data.bannerList
					}
				})
			},
			getWeather(){
				var headers = {};
				headers['content-type'] = 'application/x-www-form-urlencoded;charset=utf-8';
				uni.request({
					url:'http://wthrcdn.etouch.cn/weather_mini?city='+this.city,
					method:'GET',
					header:headers,
					dataType: 'json',
				}).then(res=>{
					var data = res['1'].data.data;
					console.log(data);
					this.weather = {
						city:data.city,
						weather:data.forecast['0'].type,
						temperature:data.wendu
					};
				})
			},
			getEBike(position){
				uni.request({
					url: 'https://api.hajhkj.cn/ebike/v2/platform/gFence/around?location='+position.lng+','+position.lat+'&type=2',
					method: 'GET',
					header:{
						'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI2MDQxOGY2ZDcxN2MzNjAwMDE3Mzg5MTAiLCJwaG9uZSI6IjE4NTA3MTUyMTg1IiwiYWdlbnRJZCI6IjIiLCJidWlsZCI6IjMuMy4xMyIsImRldklkIjoiZmVuZ3l1LTgxMWE5NGRmLTYzMjgtNDU1NS1hMGNmLWJjZDRiZTJjZmY4ZiIsImlhdCI6MTYyMzMwODAwMX0.TuW8RddacwdW-BjUDoOwpA2xhIQZ2R0nQt5_kqa2Vy8',
						'Connection': 'Keep-Alive',
						'Accept-Encoding': 'gzip'
					},
					success(result) {
						console.log(result)
					}
				})
			},
			nearBus(position){
				let that = this
				uni.request({
					url:'https://restapi.amap.com/v3/place/around?location='+position.lng+','+position.lat+'&s=rsv3&children=&key='+this.akey+'&radius=1500&offset=4&page=1&city='+this.city+'&language=zh_cn&platform=JS&logversion=2.0&sdkversion=1.4.17&keywords=%E5%85%AC%E4%BA%A4%E7%AB%99%E7%82%B9',
					method:'GET',
					success(result) {
						console.log(result)
						if(typeof result == 'string'){
							result = JSON.parse(result)
						}
						console.log(result)
						let data = result.data;
						if(data.pois.length > 0){
							let id = data.pois[0].id
							let name = data.pois[0].name
							let local_name = name
							let bus_address = data.pois[0].address
							let distance = 	Math.floor(data.pois[0].distance)
							bus_address = bus_address.split(';')
							bus_address.forEach(function(item,index){
								that.addressInfo(id,item,local_name,distance)
							})
						}
					}
				})
			},
			addressInfo(id,line_name,local_name,distance){
				let that = this
				uni.request({
					url:'https://restapi.amap.com/v3/bus/linename?s=rsv3&extensions=all&key='+this.akey+'&output=json&pageIndex=1&city='+this.city+'&offset=10&keywords='+line_name+'&platform=JS&logversion=2.0&sdkversion=1.4.17',
					method:'GET',
					success(result){
						result = JSON.parse(JSON.stringify(result))
						if(typeof result.data !== 'undefined'){
							that.carList.push({
								id: id,
								name: line_name,
								site: local_name.substr(0,local_name.indexOf("(")),
								distance: distance,
								index: 0,
								carInfo: result.data.buslines
							})
						}
						if(typeof result.buslines !== 'undefined'){
							that.carList.push({
								id: id,
								name: line_name,
								site: local_name,
								distance: distance,
								index: 0,
								carInfo: result.buslines
							})
						}
					}
				})
			},
			banner(){
				var headers = {};
				headers['content-type'] = 'application/json; charset=utf-8';
				headers['Host'] = 'ckej.hajhkj.cn:8880';
				headers['User-Agent'] = 'okhttp/3.10.0';
				uni.request({
					url:'https://ckej.hajhkj.cn:8880/',
					method:'POST',
					data:{"appId":"pd52vp3salp9","appVersion":"3.6.6","cityCode":"ha","datas":{"type":0},"deviceBrand":"HUAWEI","deviceId":"00000000-40c5-dc87-0000-00003e75ba24","deviceModel":"ELE-AL00","from":1,"lat":0,"lng":0,"reqType":"CommonGetBannerImg","sign":"88CD8BB20CF01F0DC32392D4C668F2E8","timestamp":Date.now()},
					header:headers
				}).then(res=>{
				})
			},
			cars(){
				var json = {"appId":"pd52vp3salp9","appVersion":"3.6.6","cityCode":"ha","datas":{"type":0},"deviceBrand":"HUAWEI","deviceId":"00000000-39c5-dc87-0000-00003e73ba24","deviceModel":"ELE-AL00","from":1,"lat":0,"lng":0,"reqType":"CommonGetBannerImg","sign":"","timestamp":1632653493541};
				var data = "deviceBrandHUAWEIdeviceId00000000-39c5-dc87-0000-00003e73ba24deviceModelELE-AL00latlngtimestamp1631586345793userId3eceecdb-1fe5-4a5e-a188-6056cd26d8f8";
				console.log(this.$util.sha1(data));
			},
			listenPosition: function(){
				var that = this;
				that.carList = []
				// #ifdef H5
				// plus.geolocation.getCurrentPosition(function(p){
				// 	var position = {lat:p.coords.latitude,lng:p.coords.longitude};
				// 	console.log(position)
				// 	that.SET_POSITION(position)
				// 	that.nearBus(position)
				// }, function(e){
				// } );
				// #endif
				// #ifdef MP-WEIXIN
				uni.getLocation({
				    type: 'wgs84',
				    success: function (res) {
						console.log(res)
						var position = {lat:res.latitude,lng:res.longitude};
						console.log(position)
						that.SET_POSITION(position)
						that.nearBus(position)
						
						that.getEBike(position)
					}
				});
				// #endif
			}
		}
	}
</script>

<style>
	.menu-height{
		height: 200rpx;
		width: 100%;
		padding-top: 40rpx;
	}
	.menu-height .action{
		line-height: 1.4;
	}
	.menu-height .action view{
		font-size: 30px;
	}
	.nav-menu{
		text-align: center;
		line-height: 1.6;
		padding-top: 10rpx;
	}
	.nav-img{
		width: 80rpx;
		height: 80rpx;
		background-color: #1CBBB4;
		border-radius: 50%;
		margin: 5rpx auto;
	}
	.sw-menu{
		padding: 20rpx;
		border-radius: 5rpx;
	}
	.sw-label .cu-item{
		background-color: rgba(0,0,0,0) !important;
	}
	/* .sw-carlist{
		margin-bottom: 20rpx;
	}
	.sw-carlist.cu-list{
		margin-top: 0 !important;
	}
	.sw-carlist .cu-item{
		margin: 20rpx;
		padding: 35rpx;
		border-radius: 10rpx;
	}
	.sw-content{
		line-height: 1.5;
		margin: 20rpx auto;
	}
	.sw-content .sw-title{
		margin-bottom: 20rpx;
		font-size: 32rpx;
	}
	.sw-content .sw-desc{
		font-weight: 400;
	}
	.sw-after{
		display: flex;
		line-height: 40rpx;
	}
	.sw-after .station{
		font-size: 40rpx;
	}
	.sw-bg-white-o{
		background-color: rgba(255,255,255,.3);
		border-radius: 10rpx;
	} */
</style>
